<template>
	<view class="container">
		<top-back-navbar position="fixed" title="抢宝活动" background="#001b4d" color="#ffff"></top-back-navbar>
		<view class="content">
			<view class="top-info-group" >
				<view class="top-info-box">
					<view class="top-info-item" @click="$u.route(`/pagesBW/mxlist/mxlist?type=ccrl`)">
						<view class="goods_item-text">船仓容量</view>
						<view class="goods_item-text">{{pageDetail.intgral_ed || '0.00'}}千克</view>
					</view>
				</view>
				<!-- <view class="top-info-box">
					<view class="top-info-item">
						<view class="goods_item-text">店铺空间</view>
						<view class="goods_item-text">{{pageDetail.space  || '0.00'}}平方</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view class="bar-group">
			<view class="bar-btn"></view>
		</view> -->
		<view class="start-btn" @click="submit" v-if="currentIndex>=0">确认抢宝</view>
		<view :class="['bw-groups'+(index+1)]" v-for="(item,index) in pageDetail.gf_goods" @click="changeBx(index)" :key="index">
			<image class="bw-groups-img" mode="heightFix" :src="`/static/images/bw/bh${item.nums}.png`"></image>
			<view class="bw-groups-price" :class="[currentIndex == index?'bw-groups-price-active':'bw-groups-price-import']">{{item.price}}×{{item.store}}</view>
		</view>
		<image class="bw-cz-img" mode="widthFix" src="/static/images/bw/cz.png"></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageDetail:{},
				currentIndex:-1,
				currentId:''
			};
		},
		onLoad: function(e) {
			this.$GetOpenid().then(res=>{
				this.openid=res;
				this.initMethod()
			})
		},
		methods: {
			initMethod() {
				uni.showLoading();
				this.$myRequest({
					url:'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.grab_orders&app=1',
					method:'POST',
					data:{openid:this.openid}
				}).then(res=>{
					uni.hideLoading()
					if(res.data){
						let gf_goods=Array.isArray(res.data.gf_goods)?res.data.gf_goods:[];
						gf_goods.forEach(item=>{
							var num=Math.floor(Math.random()*6+1);
							item.nums=num;
						})
						console.log('gf_goods',gf_goods)
						res.data.gf_goods=gf_goods;
						this.pageDetail=res.data; 
					}
				})
			},
			changeBx(index){
				this.currentIndex=index;
				this.currentId=this.pageDetail.gf_goods[index].id
			},
			submit(){
				if(!this.currentId){
					return uni.showToast({
								title:'请选择一个宝物',
								icon:'none'
							})
				}
				uni.showLoading();
				this.$myRequest({
					url:'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.zhai_order&app=1',
					method:'POST',
					data:{openid:this.openid,id:this.currentId}
				}).then(res=>{
					uni.hideLoading()
					if(res.data.error == 0){
						uni.showToast({
							title:'抢宝成功',
							icon:'success'
						})
						this.currentIndex=-1;
						this.currentId='';
					}else{
						uni.showToast({
							title:res.data.message,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
	  background:#b3c2c6 url('/static/images/bw/bw_qg_bg2.png') center no-repeat;
	  background-size: 100% 100%;
	  height: 100%;
	}
	.content {
		padding: 0 15rpx;
		.top-info-group{
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			padding:15rpx;
			.top-info-box{
				width: 50%;
				padding:15rpx;
			}
			.top-info-item{
				background: url('/static/images/home/bw_item.png') center no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 114rpx;
				.goods_item-text{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 32rpx;
					color:#fff;
				}
			}
		}
	}
	.bw-groups1{
		position: absolute;
		top:22%;
		left:300rpx;
		z-index: 10;
	}
	.bw-groups2{
		position: absolute;
		top:28%;
		right:40rpx;
		z-index: 10;
	}
	.bw-groups3{
		position: absolute;
		top:30%;
		left:40rpx;
		z-index: 10;
	}
	.bw-groups4{
		position: absolute;
		top:37%;
		left:53%;
		transform: translateX(-50%);
	}
	.bw-groups5{
		position: absolute;
		top:46%;
		left:80rpx;
		z-index: 10;
	}
	.bw-groups6{
		position: absolute;
		top:45%;
		right:30rpx;
		z-index: 10;
	}
	.bw-groups7{
		position: absolute;
		top: 61%;
		right: 140rpx;
		z-index: 10;
	}
	.bw-groups8{
		position: absolute;
		top: 61%;
		left: 140rpx;
		z-index: 10;
	}
	.bw-groups9{
		position: absolute;
		top: 74%;
		left: 50%;
		z-index: 10;
		transform: translateX(-50%);
	}
	.bw-groups-price{
		height: 44rpx;
		min-width: 190rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		color:#f5df60;
		padding:0 20rpx 0 30%;
		overflow: hidden;
	}
	.bw-groups-price-import{ 
		background: url('/static/images/bw/bh_price.png') center no-repeat;
		background-size: 100% 100%;
	}
	.bw-groups-price-active{
		background: url('/static/images/bw/bh_price_active.png') center no-repeat;
		background-size: 100% 100%;
	}
	.bw-groups-img{
		height: 110rpx;
	}
	.bar-group{
		position: absolute;
		top:25%;
		right:40rpx;
		width: 30rpx;
		height: 360rpx;
		border-radius: 30rpx;
		background: url('/static/images/home/bw_bar_bg.png') center no-repeat;
		background-size: 100% 100%;
		.bar-btn{
			position: absolute;
			bottom:0;
			left:50%;
			width: 58rpx;
			height: 58rpx;
			background: url('/static/images/home/bw_bar_btn.png') center no-repeat;
			background-size: 100% 100%;
			transform: translateX(-50%);
			z-index: 10;
		}
	}
	.start-btn{
		position: absolute;
		bottom:140rpx;
		right:50rpx;
		width: 260rpx;
		height: 100rpx;
		background: url('/static/images/home/bw_status.png') center no-repeat;
		background-size: 100% 100%;
		font-size: 34rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		color:#3e2b1f;
		z-index: 20;
	}
	.bw-cz-img{
		position: absolute;
		top:45%;
		left:50%;
		transform: translateX(-50%);
		width: 75%;
	}
</style>
